<!-- 搜索进行中 -->
<template>
	<div id="search_underway">
		
		<div class="search_content_box">
			<p>搜索：{{$route.query.keyword}}</p>
			<div class="history_search" v-for="(item,idx) in keyword_song" :key="idx">
				<van-icon name="search" color="#ccc" size="20" />
				<div class="right">
					<p @click="toResult(item.name)">{{item.name}}</p>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import { api } from "@/assets/http/api.js"
	export default{
		data(){
			return {
				keyword:"",
				keyword_song:[]
			}
		},
		watch:{
			$route:{
				async handler(newValue){
					// 当参数改变时，通过Ajax请求新的数据并渲染
					console.log(newValue.query.keyword);
					// 把路由信息给到 hero 变量，方便后续渲染和数据拼接
					this.keyword = newValue.query.keyword;
					let res = await this.$axios(api.get_keyword_list + this.keyword);
					this.keyword_song = res.data.result.songs;
				},
				immediate:true,
				deep:true
			}
		},
		methods:{
			toResult(name){
				this.$router.push({
					path:"/search/result",
					query:{
						songName:name
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
		// letter-spacing: 2px;
	}
	.search_content_box {
		>p {
			max-width: calc(100vw - 20px);
			text-align: left;
			height: 50px;
			line-height: 50px;
			font-size: 15px;
			margin: 0 10px;
			border-bottom: 1px solid #eee;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			color: deepskyblue;
		}
	}
	
	.history_search {
		margin: 0 10px;
		height: 40px;
		line-height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;
		.right {
			width: calc(100vw - 46px);
			border-bottom: 1px solid #eee;
			>p {
				max-width: 90vw;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	
</style>
